<template>
    <div>
        <TopNav title="栏目管理" />
        <div class="activeList">
            <h2>点击删除以下频道</h2>
            <div class="list">
                <div
                    class="item"
                    v-for="(item, index) in activeList"
                    @click="deactive(index)"
                    :key="item.id"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="deactiveList">
            <h2>点击添加以下频道</h2>
            <div class="list">
                <div
                    class="item"
                    v-for="(item, index) in deactiveList"
                    @click="active(index)"
                    :key="item.id"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopNav from "../components/TopNav";
    export default {
        components: {
            TopNav,
        },
        data() {
            return {
                activeList: [],
                deactiveList: [],
            };
        },
        watch: {
            activeList() {
                localStorage.setItem("activeList", JSON.stringify(this.activeList));
            },
            deactiveList() {
                localStorage.setItem(
                    "deactiveList",
                    JSON.stringify(this.deactiveList)
                );
            },
        },
        created() {
            if (localStorage.getItem("activeList")) {
                this.activeList = JSON.parse(localStorage.getItem("activeList"));
                if (localStorage.getItem("deactiveList")) {
                    this.deactiveList = JSON.parse(
                        localStorage.getItem("deactiveList")
                    );
                }
            } else {
                // 这里是发送请求, 但是不一定需要
                this.$axios({
                    url: "/category",
                }).then((res) => {
                    this.activeList = res.data.data;
                });
            }
        },
        methods: {
            deactive(index) {
                // 禁用前判断, 如果剩下最后一个则不再禁用
                if (this.activeList.length == 1) {
                    return;
                }
                // 这里要禁用一个分类,
                // 先放入禁用列表, 再从激活列表中删除即可
                this.deactiveList.push(this.activeList[index]);
                this.activeList.splice(index, 1);
            },
            active(index) {
                this.activeList.push(this.deactiveList[index]);
                this.deactiveList.splice(index, 1);
            },
        },
    };
</script>

<style lang="less" scoped>
    h2 {
        font-weight: 400;
        font-size: 14 /360 * 100vw;
        color: #888;
        padding-left: 10 /360 * 100vw;
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        .item {
            font-size: 16 /360 * 100vw;
            padding: 6 /360 * 100vw 14 /360 * 100vw;
            border: 1px solid #888;
            margin: 12 /360 * 100vw;
        }
    }
</style>